Sombras sin imágenes : Gem@ BLOG

Un articulo de Nicolas Gallagher nos proporciona la técnica y algunos aspectos para conseguir sombras sin imágenes. Esto es un pequeño ejemplo:

En Blogger para utilizar las sombras sin imagen primeramente añadimos los estilos de la sombra, se añadirá justo antes de ]]></b:skin> y a partir de ahí el estilo de sombra que deseamos mostrar.


.drop-shadow {
 position:relative;
 float:left;
 width:40%;
 padding:1em;
 margin:2em 10px 4em;
 background:#fff;
 -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
 -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after {
 content:"";
 position:absolute;
 z-index:-2;
}
.drop-shadow p {
 text-align:center;
 font-size:16px;
 font-weight:bold;
}

A continuación añadimos los estilos según el modelo que vamos a añadir:

Lifted corners

Curled corners

Perspective

Raised box

Rotated box

Guardamos los cambios y nos situamos justo donde deseamos mostrar nuestro efecto sombra (entrada, plantilla o gadget de HTML) y añadimos lo siguiente:

Lifted corners

<div class="drop-shadow lifted">

<p>TEXTO</p>

</div>

Curled corners

<div class="drop-shadow curled">

<p>TEXTO</p>

</div>

Perspective

<div class="drop-shadow perspective">

<p>TEXTO</p>

</div>

Raised box

<div class="drop-shadow raised">

<p>TEXTO</p>

</div>

Rotated box

<div class="drop-shadow lifted rotated">

<p>TEXTO</p>

</div>

Se visualiza en Firefox 3.5 +, 5 + Chrome, Safari 5 +, Opera 10.6 +, IE 9 +

Vku: Es una lastima que no se vea en IE 7 o 8 ya que para el 9 falta para que lo tenga, ya que por ahora sigo con mi querido XP.

Muy buena entrada Gema, a mi me encantan las sombras y sería bueno poder quitar imágenes.; 25.4.11
Karla Castañeda: Me encantan de verdad Gema!, son muy prácticos y bonitos, ya que no necesitas ir al editor de imágenes a crearlos, sin embargo ya sabes como es IE, y aunque IE9 ya soporta esas propiedades, también sabemos que la gente no se actualiza tan rápido como a ti y a mi nos gustaría :D, tal vez los que tenemos blogs sí, pero en términos generales, desafortunadamente no.

Salu2!; 26.4.11
Marta: Estimada Gema:

Ha sido todo un regalo. Ya puedes ver una muestra en mi web: www.cinehistoria.com. ¡Gloria al CSS!.

Gracias,

Tomás.; 26.4.11
Henry Herrera: Se ven geniales, lastima que necesita las ultimas versiones de los navegadores, para que nuestro blog se vea perfecto en cualquier maquina.

Por el momento mejor crearlos con Photoshop, ojala y un dia los navegadores se pongan de acuerdo en estandarizarse, pero eso es solo una utopía.; 26.4.11
Gem@: :: Vku yo también usaba el XP en el ordenador de sobremesa pero luego cuando dijo aquí me quedo y no ando más me fui acostumbrando al Vista que por cierto no se habla nada bien de él pero para el uso que yo le doy funciona de maravilla :D

:: Karla cierto, cierto y cierto... hay que actualizar el navegador, todavía hay quien piensa que se trata de instalar de nuevo el sistema o algo así como formatear incñuso que se conforman lo que ven y la forma que lo ven. Falta de información, una pena :S

:: CineHistoria ha quedado muy bien ¡felicitaciones! :)

:: Henry Herrera ¿lástima por qué? dime una cosa, si pudieras escoger ver una película en blanco y negro o verla en color simplemente cambiando de canal ¿cual verías?; 27.4.11
Henry Herrera: Te digo Gemma que lastima porque muchas personas no actualizan de inmediato sus navegadores como lo hariamos nosotros y cuando vean tu blog, simplemente se encontrarian con que no se ve nada o lo poco que se ve se muestra incorrecto.

Por eso hay que darle tiempo a que los usuarios actualizen sus navegadores para poder aplicar todas esas cosas que aun no funcionan en todos los navegadores, sobre todo IExplore, que es nuestro dolor de cabeza como diseñadores de blogs.

Pero el tiempo se pasa rapido, eso es lo bueno.; 28.4.11
Gem@: :: Henry yo no me canso de repetir que hay que actualizar, son muchos los que creen tener problemas de visualizar mal y cuando les digo que actualicen se dan cuenta que no existe tal problema, sin embargo la pregunta siguiente es ¿y cómo hago para que mis visitas actualicen?
Eso me hace pensar que nos preocupa más el que las visitas vean bien nuestro blog antes que verlo bien nosotros y pienso que es un error, está bien que todo lo veamos lo mejor posible pero no hay que darle prioridad a los demás en ese sentido primero porque se trata de nuestro blog y segundo porque no está a nuestro alcance concienciar a todo el mundo de los beneficios de actualizar.
Reconozco que intento que mi blog se vea bien con IE pero nunca, por mucho que cueste creerlo compruebo si se ve bien en otros navegadores que no sean Firefox y como te decía IE ¿por qué? simplemente porque sería volverme loca y vivir pendiente de algo que no me quita el sueño :O; 29.4.11
Henry Herrera: Tienes muchisima razon Gemma no lo habia visto de esa forma. Feliz fin de semana.; 29.4.11
Gem@: :: Feliz fin de semana Henry :D; 29.4.11
♥ Clau Martearena: Hola! Sos una capa, estoy re sorprendida! Una pregunta, como hago los efectos a las imagenes como tenes en la parte de abajo de tu blog? Las imagenes de la esquina derecha, ESE EFECTO! Si podes explicarme, te estaria más que agradecida!; 15.5.11
Gem@: :: ♥ nadabohemio puede ver una amplia información en la siguiente entrada de Vagabundia:

http://vagabundia.blogspot.com/2010/11/girando-las-cosas-con-css.html; 16.5.11
Fantasma Velez: Hay posibilidad de que puedan subir un ejemplo de todos en un ZIP o un RAR.? Muchísimas gracias, y excelente el sitio.; 15.6.11
Fantasma Velez: Acá les dejo el link, del código completo que deben pegar en una hoja HTML. Saludos :)

http://codepad.org/lMTAV7pf; 15.6.11
Gem@: :: Saludos Fantasma Velez.; 15.6.11